<template>
  <view class="container">
    <view class="search-bar">
      <input type="text" placeholder="请输入处方单号" v-model="searchQuery" />
    </view>
    <view class="filter-bar">
      <picker mode="selector" :range="statusOptions" @change="onStatusChange">
        <view class="picker">
          处方状态: {{ statusOptions[statusIndex] }}
        </view>
      </picker>
      <picker mode="date" @change="onDateChange">
        <view class="picker">
          日期: {{ date }}
        </view>
      </picker>
    </view>
    <view class="prescription-list">
      <block v-for="(prescription, index) in prescriptions" :key="index">
        <view class="prescription-item">
          <view class="item-header">
            处方单号：{{ prescription.prescriptionNum }} <text class="status">{{ prescription.status }}</text>
          </view>
          <view class="item-date" value-formate="yyyy-MM-dd HH:mm:ss">日期：{{ prescription.prescriptionDate }}</view>
<!--          <view class="example-body">-->
<!--            <uni-datetime-picker type="datetime" v-model="prescription.prescriptionDate" @change="changeLog" />-->
<!--          </view>-->
          <view class="item-actions">
            <button @click="viewDetails(prescription)">查看详情</button>
            <button v-if="prescription.status === '待取药'" @click="renewPrescription(prescription)">续方</button>
          </view>
        </view>
      </block>
    </view>
  </view>
</template>

<script>
import {PrescriptionList} from "@/api/medicine/pharmacy";

export default {
  data() {
    return {
      searchQuery: '',
      statusIndex: 0,
      date: '请选择日期',
      prescriptions: [
        // { number: '0124567', status: '待取药', date: '2022-09-03 14:30' },
        // { number: '0144667', status: '已失效', date: '2022-09-03 14:30' },
        // { number: '0224567', status: '已取药', date: '2022-09-03 14:30' },
        // { number: '465489', status: '已失效', date: '2022-09-03 14:30' }
      ],
      statusOptions: ['待取药', '已取药', '已失效']
    };
  },
  computed: {
    filteredPrescriptions() {
      return this.prescriptions.filter(prescription => {
        return prescriptions.number.includes(this.searchQuery) &&
            prescription.status === this.statusOptions[this.statusIndex];
      });
    }
  },
  created() {
    this.PrescList()
  },
  methods: {
    PrescList() {
      PrescriptionList().then(
          res => {
            console.log(res);
            this.prescriptions = res.data;
          }
      );
    },
    onStatusChange(e) {
      this.statusIndex = e.detail.value;
    },
    onDateChange(e) {
      this.date = e.detail.value;
    },
    viewDetails(prescription) {
      // uni.showToast({
      title: `查看详情: ${prescription.prescriptionNum}`,
          this.$router.push('/pages/medicine/patientdetails/index');
      icon: 'none'
      // });
    },
    renewPrescription(prescription) {
      uni.showToast({
        title: `续方: ${prescription.number}`,
        icon: 'none'
      });
    }
  }
};
</script>

<style>
.container {
  padding: 20px;
}
.search-bar {
  margin-bottom: 20px;
}
.filter-bar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.picker {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.prescription-list {
  border-top: 1px solid #ccc;
}
.prescription-item {
  padding: 15px 0;
  border-bottom: 1px solid #ccc;
}
.item-header {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
}
.status {
  color: red;
}
.item-date {
  margin-top: 5px;
  color: #666;
}
.item-actions {
  margin-top: 10px;
}
button {
  margin-right: 10px;
}
</style>
